<template>
  <div class="home-container">
    <div class="warp">
      <div v-if="!isEdtior" class="searchBox">
        <van-search
          v-model="searchVal"
          show-action
          placeholder="搜索"
          @input="seachInput"
          @search="onSearch"
        >
          <template #action>
            <div class="sumbit" @click="onSearch">搜索</div>
          </template>
        </van-search>
        <div v-if="searboxFalg" class="searchValBox">
          <div
            v-for="(item, index) in seachList"
            :key="index"
            class="searchItem"
            @click="clickSearchVal(index)"
          >
            {{ item.name }}({{ item.address }})
          </div>
          <div v-if="seachList.length <= 0" class="searchItem">暂无数据</div>
        </div>
      </div>
      <div v-if="!isEdtior" v-show="showtips" class="tipsBox">
        <img
          class="tipsIcon"
          src="@/assets/fieldManage/tips.png"
          alt
        >
        <span>请在地图绿色区域内新增田</span>
        <img
          class="closeIcon"
          src="@/assets/fieldManage/x.png"
          alt
          @click="showtips = false"
        >
      </div>
      <div id="drawField" ref="drawField" class="one" />

      <div v-if="!isEdtior" class="leftBtn">
        <div class="addRec">
          <div class="add" @click="addZomm">+</div>
          <div class="recd" @click="recZoom">-</div>
        </div>
        <img
          class="selfImg"
          src="@/assets/fieldManage/self.png"
          alt
          @click="flyMap"
        >
        <div class="getnow" @click="getLngLatLocation">
          <img
            class="dingweiicon"
            src="@/assets/fieldManage/dingwei.png"
            alt
          >
          <div>定位</div>
        </div>
      </div>

      <div v-if="!isEdtior" class="button">
        <div
          v-show="showEnclosure"
          class="edtior buttonItem"
          @click="enclosure"
        >
          <img
            class="areaIcon"
            src="@/assets/fieldManage/area.png"
            alt
          >
          &nbsp;&nbsp;圈地
        </div>
        <div v-show="showempyOne" class="empy buttonItem" @click="empyOne">
          <img
            class="areaIcon"
            src="@/assets/fieldManage/del.png"
            alt
          >
          &nbsp;&nbsp;清空
        </div>
        <div v-show="showNextRun" class="next buttonItem" @click="nextRun">
          下一步
        </div>
        <div v-show="showEmpy" class="empy buttonItem" @click="empy">
          <img
            class="delIcon"
            src="@/assets/fieldManage/del.png"
            alt
          >
          &nbsp;&nbsp;清空
        </div>

        <div v-show="showNext" class="next buttonItem" @click="next">
          下一步
        </div>
      </div>

      <div v-if="isEdtior" class="button-confirm" @click="onConfirmEdit">
        确认
      </div>
      <div v-if="isEdtior" class="button-cancel" @click="onCancelEdit">
        取消
      </div>

      <div class="bottom">
        <div class="itembottom">
          <div class="name">面积</div>
          <div class="value">{{ area }}亩</div>
        </div>
        <div class="itembottom">
          <div class="name">海拔</div>
          <div class="value">{{ altitude }}米</div>
        </div>
        <div class="itembottom">
          <div class="name">坡度</div>
          <div class="value">{{ slope }}度</div>
        </div>
        <div class="itembottom">
          <div class="name">周长</div>
          <div class="value">{{ perimeter }}米</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src='./index.js'>
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
